<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">



    <link rel="stylesheet" href="/pages/css/amazeui.min.css" type="text/css"/>
    <link rel="stylesheet" href="/pages/css/style.css" type="text/css"/>
    <style type="text/css">
        select {
            /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
            border: none;
            /*很关键：将默认的select选择框样式清除*/
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;

            /*在选择框的最右侧中间显示小箭头图片*/
            background: url("/pages/images/xiala.png") no-repeat scroll right center transparent;
            /*为下拉小箭头留出一点位置，避免被文字覆盖*/
            padding-right: 12px;
            width: 70%;
            float: left;
        }
        /*清除ie的默认选择框样式清除，隐藏下拉箭头*/
        select::-ms-expand {
            display: none;
        }
    </style>

</head>
<body class=" bgcolor">
<header data-am-widget="header" class="am-header am-header-default jz">
    <div class="am-header-left am-header-nav">
        <a href="javascript:history.back()" class="">
            <i class="am-icon-chevron-left"></i>
        </a>
    </div>
    <h1 class="am-header-title">
        <a href="#title-link" class="">人员注册</a>
    </h1>


</header>

<div id="app">

    <div class="jl"></div>
    <div class="addcard">
        <div class="addcard-kh" style="border-radius: 5px 5px 0 0;">
            <span>姓名</span>
            <input type="text" v-model="name"/>
        </div>
        <div class="addcard-kh" style=" margin-top: -1.1rem; border-radius: 0 0 5px 5px;"><span>类型</span>
            <!--<input type="text" v-model="type"/>-->
            <select id="selectType"  v-model="type" @change="chooseSelect">
                <option value="0">业主</option>
                <option value="1">家属</option>
                <option value="2">访客</option>

                <!--<option disabled value="">&#45;&#45;选择类型&#45;&#45;</option>
                <option v-for="option in options" :value="option.menu_id">
                   {{option.menu_name}}
                </option>-->

            </select>

        </div>
        <div class="addcard-kh" style=" margin-top: -1.1rem; border-radius: 0 0 5px 5px;"><span>备注</span>
            <input type="text" placeholder="用途描述" v-model="desc"/>
        </div>
        <ul class="near">
            <li>
                <div class="pic"><img  id="preview" src="/pages/images/pic.png"/></div>
                <div class="text">
                    <h2><i></i><span v-text="name"></span></h2>
                    <p>类型：<span v-text="typeName"></span></p>
                    <p>备注：<span v-text="desc"></span></p>
                </div>
                <button type="button" class="ture" onclick="selectFile()">拍照</button>
            </li>
        </ul>
    </div>


    <input  type="file"  id="files"  style="display:none" accept="image/*" @change="uploadImg" />

    <button class="login-btn" v-show="addButton" type="button" @click="submitPic">添加到人员名单</button>


</div>


<script type="text/javascript" src="/pages/js/jquery.min.js"></script>
<script type="text/javascript" src="/pages/js/amazeui.min.js"></script>
<script src="/pages/js/layer.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--<script src="/pages/js/vue.js"></script>-->
<script src="/pages/js/axios.min.js"></script>
<script src="/pages/js/addFace.js"></script>
<!--<script src="/pages/js/smallexif.js"></script>-->
<script src="/pages/js/base64image.js"></script>
<script src="/pages/js/exif.js"></script>

<script>
    //打开文件选择框
    function selectFile(){
        $("#files").trigger("click");
    }

</script>

</body>
</html>
